{include file="../apps/web/view/active/mid_autumn/2022/public_head.html" /}
<div class="container exchange-container" style="background: linear-gradient(180deg, #2C143E 0%, #FF9A46 100%);">
    <div class="nav" style="padding-top:{$h}px;">
        <div class="to-back event-btn" style="top:{$h}px;"  data-event="common-js-to-native" data-target="local" data-link="back"></div>
            <div class="title-name">兑团圆</div>
    </div>
    <div class="head" style="background-image: url(/static/active/mid_autumn/2022/img/exchange-head.png);height: 19.31rem"></div>
    <div class="box exchange-box" ontouchstart="" onmouseover="">
        <div class="tab-title">
            <div class="tab-title-item event-btn cur" data-event="tab-change"><span class="text">7折区</span></div>
            <div class="tab-title-item event-btn" data-event="tab-change"><span class="text">8折区</span></div>
            <div class="tab-title-item event-btn" data-event="tab-change"><span class="text">9折区</span></div>
        </div>
        <div class="tab-content">
            <div class="tab-content-item">
                {foreach $data['exchange_list']['seven_discount'] as $k => $v}
                <div class="list-item list-item-{$v.id}">
                    <div class="img"></div>
                    <div class="title">{$v.name}</div>
                    <div class="des">消耗：{$v.num}<span class="icon icon-lantern"></span></div>
                    <div class="status-btn event-btn {if $v.status}disabled{/if}" data-event="exchange-coupon" data-id="{$v.id}">
                        <div class="line-flag"></div>
                        <div class="btn-text">{if $v.status}已兑换{else}兑换{/if}</div>
                        <div class="line-flag"></div>
                    </div>
                </div>
                {/foreach}
            </div>
            <div class="tab-content-item">
                {foreach $data['exchange_list']['eight_discount'] as $k => $v}
                <div class="list-item list-item-{$v.id}">
                    <div class="img"></div>
                    <div class="title">{$v.name}</div>
                    <div class="des">消耗：{$v.num}<span class="icon icon-lantern"></span></div>
                    <div class="status-btn event-btn {if $v.status}disabled{/if}" data-event="exchangeCoupon" data-id="{$v.id}">
                        <div class="line-flag"></div>
                        <div class="btn-text">{if $v.status}已兑换{else}兑换{/if}</div>
                        <div class="line-flag"></div>
                    </div>
                </div>
                {/foreach}
            </div>
            <div class="tab-content-item">
                {foreach $data['exchange_list']['nine_discount'] as $k => $v}
                <div class="list-item list-item-{$v.id}">
                    <div class="img"></div>
                    <div class="title">{$v.name}</div>
                    <div class="des">消耗：{$v.num}<span class="icon icon-lantern"></span></div>
                    <div class="status-btn event-btn {if $v.status}disabled{/if}" data-event="exchangeCoupon" data-id="{$v.id}">
                        <div class="line-flag"></div>
                        <div class="btn-text">{if $v.status}已兑换{else}兑换{/if}</div>
                        <div class="line-flag"></div>
                    </div>
                </div>
                {/foreach}
            </div>
        </div>
        <div class="lantern-num">当前：<span id="lantern-num">{$data['lantern_num']}</span><span class="icon icon-lantern"></span></div>
    </div>
</div>
<script>
    window.data = JSON.parse(`{:json_encode($data)}`);
</script>
{include file="../apps/web/view/active/mid_autumn/2022/public_foot.html" /}
